<!--
@Descripttion 选择框
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FSelect from '@/components/form/f-select'
  注册组件
    components: {
      FSelect
    }
  使用
    <FSelect v-model.trim="xxx" :options="[]" />
    <FSelect v-model.trim="xxx" @label="(v)=>{xxx=v}" :options="[]" api="" params="" :props="{value: 'value', label: 'label'}" width="220px" :disabled="false" placeholder="请选择" multiple="" />
    @label Function 选填(v)=>{} 修改选中值的回调函数,函数传入的参数为被选中的label值
    options     Object  默认值([])                               备选列表 格式:[{value: '', label: ''}]
    api         String  默认值('')                               远程接口函数名
    params      String  默认值({})                               远程接口参数
    props       Object  默认值({value: 'value', label: 'label'}) 指定字段名称
    width       String  默认值(220px)                            输入框宽度
    disabled    Boolean 默认值(false)                            是否失效
    placeholder String  默认值(请选择)                            默认占位文本
    multiple    String  默认值('')                               是否多选 可选值one(合并显示)|all(全部显高度自适应)
 -->
<template>
  <el-select
    :value="value"
    @change="changeVal"
    @clear="clearVal"
    @focus="initList"
    :clearable="multiple === 'one' || multiple === 'all' ? false : true"
    :style="`width: ${width}`"
    :disabled="disabled"
    :placeholder="placeholder"
    :multiple="multiple === 'one' || multiple === 'all'"
    :collapse-tags="multiple === 'one' ? true : false"
  >
    <el-option
      v-for="item in list"
      :key="item[props.value]"
      :label="item[props.label]"
      :value="item[props.value]"
    >
    </el-option>
  </el-select>
</template>

<script>
import * as selectApi from '@/api/select'

export default {
  name: 'f-select',
  props: {
    value: {
      required: true
    },
    // 备选列表 格式:[{value: '', label: ''}]
    options: {
      type: Array,
      default: () => []
    },
    // 远程接口函数名
    api: {
      type: String,
      default: ''
    },
    // 远程接口参数
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    // 指定字段名称
    props: {
      type: Object,
      default() {
        return {
          value: 'value',
          label: 'label'
        }
      }
    },
    // 输入框宽度
    width: {
      type: String,
      default: '220px'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Please select')
      }
    },
    // 是否多选 可选值one(合并显示)|all(全部显高度自适应)
    multiple: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.initList()
  },
  methods: {
    changeVal(value) {
      this.$emit('input', value)
      if (Array.isArray(value)) {
        // 多选
        const labelList = []
        for (const val of value) {
          for (const item of this.list) {
            if (val === item[this.props.value]) {
              labelList.push(item[this.props.label])
              break
            }
          }
        }
        this.$emit('label', labelList)
      } else {
        // 单选
        for (const item of this.list) {
          if (value === item[this.props.value]) {
            this.$emit('label', item[this.props.label])
            break
          }
        }
      }
    },
    clearVal() {
      this.$emit('label', null)
    },
    /**
     * 初始化下拉框值
     */
    initList() {
      if (this.api) {
        if (this.list.length === 0) {
          selectApi[this.api](this.params).then((res) => {
            this.list = res.data
          })
        }
      } else {
        this.list = this.options
      }
    }
  }
}
</script>
